<template>
  <div>
    <div class="flex items-center justify-between mb-4">
      <div class="flex items-center gap-2">
        <span>当前应用：</span>
        <el-image :src="addon.icon" class="w-40px h-40px rounded-2.5 mr-2" />
        <span>{{ addon.title }}</span>
      </div>
      <el-button type="primary" @click="handlePlatformAppUserForm()">新增</el-button>
    </div>
    <el-table v-loading="loading" :data="dkTableData" style="width: 100%; min-height: calc(100vh - 350px)">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="uid" label="uid" width="80" align="center" />
      <el-table-column prop="username" label="用户">
        <template #default="{ row }">
          <div class="flex items-center gap-2">
            <el-avatar :src="row.avatar" />
            {{ row.username }}
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="count" label="已使用小程序数" align="center">
        <template #default="scope">
          <el-tag>{{ scope.row.used_count }} 个</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column prop="count" label="小程序授权数详情">
        <template #default="{ row }">
          <div class="flex flex-col gap-2 w-full max-w-160px">
            <!-- 方案1：进度条+文字组合（推荐） -->
            <div>
              <div class="flex justify-between text-xs mb-1">
                <span>已用 {{ row.used_count }} 次</span>
                <span>剩余 {{ row.count - row.used_count }} 次</span>
              </div>
              <el-progress
                :percentage="Math.round((row.used_count / row.count) * 100)"
                :color="getUsageColor(row)"
                :show-text="false"
                :stroke-width="15"
              />
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="count" label="总授权小程序数">
        <template #default="{ row }">
          <el-tag>{{ row.count }} 个</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="create_time" label="日期">
        <template #default="scope">
          <div>
            <div>
              <p class="d-text-grey u-m-b-5">创建日期：</p>
              <p>{{ scope.row.create_time }}</p>
            </div>
            <div>
              <p class="d-text-grey u-m-b-5">更新日期：</p>
              <p>{{ scope.row.update_time }}</p>
            </div>
          </div>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" width="90">
        <template #default="scope">
          <el-button size="small" type="primary" @click="handlePlatformAppUserForm(scope.row.id)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      background
      layout="total,prev, pager, next"
      :total="total"
      :current-page="page"
      :page-size="pageSize"
      @current-change="currentChange"
    />
    <dk-form ref="form" :form-data="formData" top="20vh" append-to-body :is-dialog="true" @submit="getList()" />
  </div>
</template>

<script>
import { getPlatformAppUserForm, getPlatformAppUserList } from '@/api/platform/platform_app_user'
export default {
  name: 'DkPlatformAppUserList',
  props: {
    addon: {
      default: () => {},
      type: Object
    }
  },
  data() {
    return {
      page: 1,
      pageSize: 5,
      total: 0,
      dkTableData: [],
      searchData: {},
      dialogFormVisible: false,
      formData: null,
      tabs_name: '0',
      loading: true
    }
  },
  mounted() {
    this.getList(this.page)
  },
  methods: {
    getUsageColor(countMsg) {
      const percentage = countMsg.used_count / countMsg.count
      if (percentage >= 0.9) return '#f56c6c' // 红色预警
      if (percentage >= 0.7) return '#e6a23c' // 黄色警告
      return '#67c23a' // 绿色正常
    },
    onSearch() {
      this.getList(1)
    },
    currentChange(page) {
      this.getList(page)
    },
    getList(page) {
      this.searchData.addon_name = this.addon.name
      this.page = page
      getPlatformAppUserList(this.page, this.pageSize, this.searchData).then((res) => {
        this.dkTableData = res.data
        this.total = parseInt(res.msg)
        this.loading = false
      })
    },
    handlePlatformAppUserForm(id = 0) {
      getPlatformAppUserForm(id, this.addon.name).then((res) => {
        this.formData = res.data
        this.$refs.form.show()
      })
    }
  }
}
</script>
<style scoped lang="scss">
.addon-img {
  width: 80px;
  height: 80px;
  border-radius: 10px;
}
</style>
